/*
 * @Author: wellington wellington@kreditme.id
 * @Date: 2023-07-10 15:59:41
 * @LastEditors: wellington wellington@kreditme.id
 * @LastEditTime: 2023-07-13 16:38:16
 * @FilePath: /background-removal/src/directives/sizeDirect.ts
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

// 这里如果使用Map 在页面卸载时，可能忘记了在卸载时从map中移除元素，造成内存泄漏。
// 这里直接用WeakMap，就不用在卸载时手动从map中移除了，不用考虑垃圾回收了
const map = new WeakMap()
// 全局一个ob即可

const ob = new ResizeObserver((entries) => {
    for( const entry of  entries) {
        const {value, arg } = map.get(entry.target)
        if(value) {
            console.log(entry)
            // entry里面包含多个盒子模型的boxsize。borderBoxSize//contentBoxSize//contentRect//devicePixelContentBoxSize
            // 取用哪一个盒模型尺寸，也可以根据参数来 v-size-ob:borderBoxSize="fn"
            // const obj = entry.borderBoxSize[0]
            // 注意：safari只有contentRect 和target
            // 火狐也有不同，要判断是不是数组：https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7
            const array = entry[arg as keyof typeof entry]
            const obj:ResizeObserverSize = array[0 as keyof typeof array]
            value({
                width: obj.inlineSize,
                height: obj.blockSize
            })
        }
    }
})

export default {
    mounted(el: Element, binding: { value: Function, arg: string }) {
        console.log(binding.arg)
        ob.observe(el);
        map.set(el, binding)
    },
    unmounted(el: Element){
        ob.unobserve(el)
    }
}